import React,{ useState, useEffect } from 'react'
import "./training_ cprrelation.scss"
import {getTrainingCorrelationList} from "../../../api/sjq"
import {
    ReadOutlined,
    StarOutlined
  } from "@ant-design/icons";
export default function TrainingCorrelation(props) {
    const [correlationList, setCorrelationList] = useState([])
    useEffect(() => {
        const getCorrelation = async () => {
            let res = await getTrainingCorrelationList({
                isAsc: "desc",
                orderByColumn: "project.stucount",
                pageNum: 1,
                pageSize: 5,
                proType:"" ,
                specialtyTag:"" ,
                industryTag:"" ,
                proName:"" 
            })
            setCorrelationList(res.data.rows)
        }
        getCorrelation();
    }, [])
    const goDeatil= (id)=>{
        props.history.push({
            pathname:"/home/prodetail",
            state:{id}
        })
    }
    return (
        <div>
            <div className="correlation_top">
                <span className="correlation_top_kong"></span>
                <span className="correlation_top_title">相关实训</span>
            </div>
            {
                correlationList.map((item,index)=> <div className="correlation_content" key={index} onClick={()=>goDeatil(item.id)}>
                    <p className="correlation_name">{item.name}</p>
                    <p className="correlation_num">
                        <span><ReadOutlined className="correlation_icon"/>{item.stuCount}</span>
                        <span><StarOutlined className="correlation_icon"/>{item.favorCount}</span>
                    </p>
                </div>)
            }
            
        </div>
    )
}
